<template>
  <div id="bg1">
    <!--数据大屏标题-->
    <div class="header">
      <div class="bg_header">
        <div class="date fl">
          <p v-text="date"></p>
        </div>
        <div class="fl t_title">
          长春市新冠疾控指挥中心
        </div>
        <div class="time fr">
          <p v-text="time"></p>
        </div>
      </div>
    </div>
    <!--数据大屏内容主体-->
    <div class="data_content">
      <!--数据大屏内容主显示区左部-->
      <div class="main_map fl">

        <!--左上边框-->
        <div class="t_line_box">
          <i class="t_l_line"></i>
          <i class="l_t_line"></i>
        </div>
        <!--右上边框-->
        <div class="t_line_box">
          <i class="t_r_line"></i>
          <i class="r_t_line"></i>
        </div>
        <!--左下边框-->
        <div class="t_line_box">
          <i class="l_b_line"></i>
          <i class="b_l_line"></i>
        </div>
        <!--右下边框-->
        <div class="t_line_box">
          <i class="r_b_line"></i>
          <i class="b_r_line"></i>
        </div>
        <div class="main_title">
          <img src="../../assets/images_screen/t_1.png" @click="screen">当前疫情分布
        </div>
        <baidu-map
          class="bm-view"
          :center="{lng:125.3245,lat:43.886841}"
          :zoom="13"
          :scroll-wheel-zoom="true"
          >
            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
            <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
            <bm-marker v-for="marker of markerPoint" :position="{lng: marker.lng, lat: marker.lat}" :dragging="true" @click="lookDetail(marker)" animation="BMAP_ANIMATION_BOUNCE">
              <bm-info-window :title="marker.name" :position="{lng: marker.lng, lat: marker.lat}" :show="marker.showFlag" @close="infoWindowClose(marker)" @open="infoWindowOpen(marker)">
              </bm-info-window>
            </bm-marker>
        </baidu-map>
      </div>
    </div>
  </div>
</template>

<script>
import eimBase from "@/api/jsScreen/eimBase";
import request from "@/utils/request";

export default {
  name: "EimScreenMap",
  data() {
    return {
      time: '12:00:00',
      date: '2022/10/21 周五',
      markerPoint:[], //[{lng:125.296308,lat:43.867254},{lng:125.796308,lat:44.067254}],
      isShowInfo: false,
      markerIcon: '',
    }
  },
  methods: {
    getStayPoint(){
      request({
        url: '/eim/staypoint/list',
        method: 'get'
      }).then(res => {
        //console.log(res.rows)
        for(let i=0; i<res.rows.length; i++) {
          if( res.rows[i].type===2) {
            let point = {};
            point.lng = res.rows[i].longitude;
            point.lat = res.rows[i].latitude;
            point.name = res.rows[i].address;
            point.showFlag = false;
            this.markerPoint.push(point);
          }
        }
        console.log(this.markerPoint);
      });
    },
    // 点击点坐标赋值
    lookDetail(marker){
      marker.showFlag = true;
      this.infoWindow.info = marker;
    },
    // 关闭弹窗
    infoWindowClose(marker) {
      marker.showFlag = false
    },
    // 打开弹窗
    infoWindowOpen(marker) {
      marker.showFlag = true
    },
    // 返回主界面
    screen(){
      this.$router.push('screen');
    }
  },
  created() {
    // 显示时间
    setInterval(() => {
      this.time = eimBase.timer();
      this.date = eimBase.dater();
    }, 1000);
    this.getStayPoint();
  }
}
</script>

<style scoped>
@import "./cssScreen/eimBase.css";
@import "./cssScreen/eimMain.css";
@import "./cssScreen/eimMap.css";
</style>
